<template>
  <div>
    <el-select v-model="currentValue" :multiple="multiple" :disabled="disabled" clearable filterable remote :placeholder="placeholder" :remote-method="remoteMethod" :loading="loading" @change="change">
      <el-option v-for="item in optionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>

<script>

export default {
  name: "ApeEnumSelector",
  props: {
    enums: {
      type: Array,
      default: () => {
        return [];
      }
    },
    multiple: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Array],
      default: undefined
    },
    placeholder: {
      type: String,
      default: '请选择'
    }
  },
  data() {
    return {
      currentValue: this.value,
      items: this.enums,
      optionList: [],
      loading: false
    };
  },
  watch: {
    value(newValue) {
      this.currentValue = newValue;
    }
  },
  mounted() {
    this.items = this.enums
    this.optionList = this.enums
  },
  methods: {
    change(val) {
      this.$emit("input", val);
      this.$emit("change", val);
    },
    remoteMethod(query) {
      if (query) {
        this.optionList = this.items.filter(item => {
          return (
            item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
          );
        });
      } else {
        this.optionList = this.items;
      }
    }
  }
};
</script>
